<script setup lang="ts">
// const user = null;
const user = {
  uname: "zyf",
};
const msg = 1;
let spanInnerHTML: string;
// alert("用户名不能为空");
// alert("密码不能为空");
// alert("密码不一致");

if (msg == 1) {
  spanInnerHTML = "用户名已存在，请修改";
} else if (msg == 0) {
  spanInnerHTML = "用户名可用...";
} else if (msg == 2) {
  spanInnerHTML = "用户名不能为空...";
} else {
  spanInnerHTML = "网络异常.....";
}
</script>

<template>
  <div class="content">
    <h3 align="center">用户注册</h3>
    <div align="center">
      <form action="RegistAction" method="post" id="myform">
        <table>
          <tr>
            <td><p>用户名:</p></td>
            <td>
              <input
                type="text"
                name="uname"
                id="uname3"
                placeholder="请输入用户名"
              />
            </td>
            <td>
              <span id="unameSpan" style="color: red; font-size: 16px">{{
                spanInnerHTML
              }}</span>
            </td>
          </tr>
          <tr>
            <td><p>密码:</p></td>
            <td>
              <input
                type="password"
                name="pwd"
                id="pwd1"
                placeholder="请输入密码"
              />
            </td>
            <td></td>
          </tr>
          <tr>
            <td><p>密码确认:</p></td>
            <td>
              <input
                type="password"
                name="pwd2"
                id="pwd2"
                placeholder="请再次输入密码"
              />
            </td>
            <td></td>
          </tr>
          <tr>
            <td><p>联系电话:</p></td>
            <td>
              <input
                type="text"
                name="tel"
                id="tel"
                placeholder="请输入电话号码"
              />
            </td>
            <td></td>
          </tr>
          <tr>
            <td colspan="3" align="center">
              <input type="button" value="注册" class="mybutton" />
            </td>
          </tr>
          <tr>
            <td colspan="3" align="center">
              <font style="color: red; font-size: 16px">{{ msg }}</font>
            </td>
          </tr>
        </table>
      </form>
    </div>
  </div>
  <div class="clear"></div>
</template>
<style scoped>
.ulTop,
.ulBot,
table {
  /*width: 960px; */
  height: 50px;
  margin: 0px auto;
  color: #646464;
}

table {
  height: 100%;
}

.ulTop > li,
.ulBot > li {
  float: left;
  width: 160px;
  height: 50px;
  line-height: 50px;
  text-align: center;
}

.goods {
  display: block;
  width: 958px;
  height: 123px;
  border: 1px solid #ccc;
  background-color: #fafafa;
}

.select,
.bkInfo,
.price,
.numPrice,
.addMinus,
.do {
  width: 160px;
  height: 123px;
  text-align: center;
}

#bknum {
  width: 30px;
  height: 30px;
  margin: 0px -5px 0px -5px;
  text-align: center;
}

#addBtn,
#minusBtn {
  width: 35px;
  height: 34px;
}

#staBtn {
  width: 120px;
  height: 40px;
  font-size: 18px;
  background-color: #ff2832;
  color: #fff;
  border: none;
  border-radius: 6px;
}
.mybutton {
  color: white;
  background-color: red;
  margin-top: 8px;
}
</style>
